<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>state</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">



        class Weather extends React.Component {
            constructor(props) {
                super(props)

            }

            state = {
                isHot: false,
                wind: "微风",
                username: "",
                password: ""
            }
            render() {
                console.log("render")
                const { isHot, wind } = this.state
                const id =5
                return (
                    <div>
                        {console.log(this.__proto__)}
                        {console.log(this)}
                        
                        <input ref={c => { this.one = c; console.log(this.one) }}></input>
                        <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
                        <h1 onClick={this.demo}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
                        <h1 onClick={() => {
                            this.demo()
                        }}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
                        <h1 onClick={(e) => { this.deleteRow(id, e) }}>删除一行</h1>
                        <form></form>
                    </div>
                );
            }
            // changeWeather方法
            changeWeather = () => {
                console.log("changeWeather")
                console.log(this)
                const isHot = this.state.isHot
                this.setState({ isHot: !isHot })

            }
            deleteRow(id,e){
                e.preventDefault()
                console.log(id)
                console.log(e)
            }
            demo() {
                console.log(this)
            }
        }


        class Computer extends React.Component {
            render() {
                return (
                    <div>
                        {console.log(this)}

                        <h1 onClick={this.demo}>{this.props.name}今天天气很{true ? '炎热' : '凉爽'}，{"hchhch"}</h1>
                    </div>
                );
            }
        }

        function Welcom(props) {
            console.log(props)

            return (<h1>{props.name}</h1>)
        }
        function Clock(props) {
            return (
                <div>
                    <h1>大家好</h1>
                    <h2>现在是{props.time}</h2>
                </div>
            )
        }
        // function tick() {
        ReactDOM.render(
            <div>
                <Weather />
                <Computer name="hch" />
                <Welcom name="hch" />
                <Clock time={new Date().toLocaleTimeString()} />
            </div>,
            document.getElementById('test')
        )
        // }
        // setInterval(tick, 1000)








    </script>
</body>

</html>